@page "/blog/how-to-create-a-blazorise-application-beginners-guide"

<Seo Canonical="/blog/how-to-create-a-blazorise-application-beginners-guide" Title="How to create a Blazorise WASM application" Description="In this article we will learn how to create a Blazorise WebAssembly (WASM) application. As an example, we will also use basic Blazorise components to setup a simple form." ImageUrl="img/blog/2022-06-08/How_to_create_a_Blazorise_application_A_Beginners_Guide.png" />

<BlogPageImage Source="img/blog/2022-06-08/How_to_create_a_Blazorise_application_A_Beginners_Guide.png" Text="Blazorise WASM application: A Beginner's Guide" />

<BlogPageTitle>
    How to create a Blazorise WASM application: A Beginner's Guide
</BlogPageTitle>

<BlogPageParagraph>
    In this article we will learn how to create a Blazorise WebAssembly (WASM) application. As an example, we will also use basic Blazorise components to setup a simple form.
</BlogPageParagraph>

<BlogPageSubtitle>
    Prerequisites
</BlogPageSubtitle>

<BlogPageParagraph>
    To work on a Blazor app, you can start by taking of the following approaches:
</BlogPageParagraph>

<BlogPageList>
    <BlogPageListItem>
        <Anchor To="https://docs.microsoft.com/en-us/dotnet/core/tools/" Title="Link to .NET CLI">.NET CLI</Anchor> and <Anchor To="https://code.visualstudio.com/" Title="Link to Visual Studio Code">Visual Studio Code</Anchor>: Preferred for Linux.
    </BlogPageListItem>
    <BlogPageListItem>
        <Anchor To="https://visualstudio.microsoft.com/downloads/" Title="Link to Visual Studio 2022">Visual Studio 2022</Anchor> and <Anchor To="https://code.visualstudio.com/" Title="Link to Visual Studio Code">Visual Studio Code</Anchor>: Preferred for Windows and macOS.
    </BlogPageListItem>
</BlogPageList>

<BlogPageParagraph>
    In this tutorial, we are going to use <Anchor To="https://visualstudio.microsoft.com/downloads/" Title="Link to Visual Studio 2022">Visual Studio 2022</Anchor>. Please install the latest version of Visual Studio 2022. While installing, make sure you have selected the ASP.NET and web development workload.
</BlogPageParagraph>

<BlogPageSubtitle>
    Creating the Blazorise WebAssembly application
</BlogPageSubtitle>

<BlogPageParagraph>
    First, we'll create a Blazor WebAssembly app. Please follow these steps to do so:
</BlogPageParagraph>

<BlogPageList Ordered>
    <BlogPageListItem>
        Open Visual Studio 2022 and click on the <Strong>Create a new Project</Strong> option.
    </BlogPageListItem>
    <BlogPageListItem>
        In the Create a new Project dialog that opens, search for <Strong>Blazor</Strong> and select <Strong>Blazor WebAssembly App</Strong> from the search results. Then, click <Strong>Next</Strong>. Refer to the following image. <BlogPageImageModal ImageSource="img/blog/2022-06-08/Create-a-new-project-dialog.png" ImageTitle="Create a new project dialog" />
    </BlogPageListItem>
    <BlogPageListItem>
        Now you will be at the <Strong>Configure your new project</Strong> dialog. Provide the name for your application. Here, we are naming the application <Strong>BlazoriseSampleApplication</Strong>. Then, click <Strong>Next</Strong>. Refer to the following image. <BlogPageImageModal ImageSource="img/blog/2022-06-08/Configure-your-new-project-dialog.png" ImageTitle="Configure your new project dialog" />
    </BlogPageListItem>
    <BlogPageListItem>
        On the <Strong>Additional information</Strong> page, select the target framework <Strong>.NET 6.0</Strong> and set the authentication type to <Strong>None</Strong>. Also, check the options <Strong>Configure for HTTPS</Strong> and uncheck <Strong>ASP.NET Core hosted</Strong>, and then click on <Strong>Create</Strong>. Refer to the following image. <BlogPageImageModal ImageSource="img/blog/2022-06-08/Additional-information-dialog.png" ImageTitle="Additional information dialog" />
    </BlogPageListItem>
</BlogPageList>

<BlogPageSubtitle>
    Installing the Blazorise packages
</BlogPageSubtitle>

<BlogPageParagraph>
    We have now completed our Blazor WebAssembly project. Continue by installing the <Strong>Blazorise NuGet</Strong> packages and configuring the project to use Blazorise.
</BlogPageParagraph>

<BlogPageList Ordered>
    <BlogPageListItem>
        Right click on the project in solution explorer and click on <Strong>Manage NuGet Packages</Strong> from the dropdown menu. <BlogPageImageModal ImageSource="img/blog/2022-06-08/Manage-NuGet-Packages.png" ImageTitle="Manage NuGet Packages" />
    </BlogPageListItem>
    <BlogPageListItem>
        Navigate to the <Strong>Browse</Strong> tab and search for <Strong>Blazorise</Strong>. To install it, use the <Strong>Blazorise.Bootstrap5</Strong> package. Repeat for <Strong>Blazorise.Icons.FontAwesome</Strong> package. <BlogPageImageModal ImageSource="img/blog/2022-06-08/Install-Blazorise-NuGet.png" ImageTitle="Install Blazorise NuGet" />
    </BlogPageListItem>
    <BlogPageListItem>
        The next step is to change your <Strong>index.html</Strong> and include the Blazorise CSS source files:
        <BlogPageSourceBlock Code="BeginnersGuideToCreateBlazoriseApp_StaticFilesExample" />
    </BlogPageListItem>
    <BlogPageListItem>
        Next, define the Blazorise using in your main <Strong>_Imports.razor</Strong> file. This will instruct Visual Studio IntelliSense to suggest Blazorise components to us.
        <BlogPageSourceBlock Code="BeginnersGuideToCreateBlazoriseApp_UsingsExample" />
    </BlogPageListItem>
    <BlogPageListItem>
        Go to the <Strong>Client</Strong> folder and define the following in <Strong>Program.cs</Strong>.
        <BlogPageSourceBlock Code="BeginnersGuideToCreateBlazoriseApp_ServicesExample" />
    </BlogPageListItem>
</BlogPageList>

<BlogPageSubtitle>
    Setting the Simple Example
</BlogPageSubtitle>

<BlogPageParagraph>
    The last step is to adjust a default Blazor example to use Blazorise components.
</BlogPageParagraph>

<BlogPageParagraph>
    Go the <Strong>Counter.razor</Strong> under the <Strong>Pages</Strong> folder and copy/paste the following snippet.
</BlogPageParagraph>

<BlogPageSourceBlock Code="BeginnersGuideToCreateBlazoriseApp_CounterExample" />

<BlogPageSubtitle>
    Executing the demo
</BlogPageSubtitle>

<BlogPageParagraph>
    You should now be able to run the Blazorise sample project without incident. Press <Strong>F5</Strong> on your keyboard, or select <Strong>Start Debugging</Strong> from the Debug menu.
</BlogPageParagraph>

<BlogPageParagraph>
    Wait for VisualStudio to complete the build process, and you should see the new application running in your browser. To see an example of a counter, click on the Counter button in the sidebar.
</BlogPageParagraph>

<BlogPageImageModal ImageSource="img/blog/2022-06-08/Counter-Example.png" ImageTitle="Counter Example" />

<BlogPageSubtitle>
    Resource
</BlogPageSubtitle>

<BlogPageParagraph>
    Also, you can get the source code of the sample from the <Anchor To="https://github.com/Megabit/Blazorise-Samples" Title="Link to BlazoriseSampleApplication">BlazoriseSampleApplication</Anchor> in Blazor demo on GitHub.
</BlogPageParagraph>

<BlogPageSubtitle>
    Summary
</BlogPageSubtitle>

<BlogPageParagraph>
    Thanks for reading! In this blog, we learned how to create and setup Blazorise in a Blazor WebAssembly app. We have also modified default Counter example to make use of Blazorise components. Try out this demo and let us know what you think!
</BlogPageParagraph>

<BlogPageParagraph>
    Blazorise provides more than 80 high-performance, lightweight, and responsive web UI components in a single package. Create charming web applications with them!
</BlogPageParagraph>

<BlogPagePostInto UserName="Mladen Macanović" ImageName="mladen" PostedOn="June 8th, 2022" Read="5 min" />
